<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>轮播图列表</title>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1" name="viewport">
    <link rel="stylesheet" th:href="@{/admin/assets/css/bootstrap-clearmin.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/admin/assets/css/roboto.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/admin/assets/css/material-design.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/admin/assets/css/small-n-flat.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/admin/assets/css/font-awesome.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" type="text/css">
</head>
<body class="cm-no-transition cm-1-navbar">
<!--后台公共侧边栏（菜单）-->
<div th:replace="common/admin/common::common_siderbar"></div>
<!--后台公共顶部-->
<div th:replace="common/admin/common::common_top"></div>
<div id="app">
    <div id="global">
        <div class="container-fluid">
            <div class="row cm-fix-height">
                <div class="col-sm-12">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <h4>轮播图列表</h4>
                            <div style="margin: 10px 0;">
                                <div class="btn-group" role="group">
                                    <button @click="showBox('add',0);" class="btn btn-turquoise"
                                            data-toggle="modal" type="button">
                                        <i class="fa fa-plus"></i> 添加
                                    </button>
                                </div>
                            </div>
                            <table class="table table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>标题</th>
                                    <th>图片</th>
                                    <th>链接</th>
                                    <th>到期时间</th>
                                    <th>是否展示</th>
                                    <th>排序</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="adver in advertisementList">
                                    <th scope="row">{{adver.id}}</th>
                                    <td>{{adver.title}}</td>
                                    <td><img :src="adver.imgUrl | urlFilter" height="30px" width="50px">
                                    </td>
                                    <td>{{adver.targetUrl}}</td>
                                    <td>{{adver.endTime | formatDate}}</td>
                                    <td>
                                        <input @click="updateShow(adver.id,adver.isShow)" lay-skin="switch" type="checkbox"
                                               v-model="adver.isShow">
                                    </td>
                                    <td>{{adver.sort}}</td>
                                    <td>
                                        <button @click="showBox('update',adver.id);" class="btn btn-info" type="button">修改
                                        </button>
                                        <button @click="deleteAdver(adver.id);" class="btn btn-danger" type="button">删除
                                        </button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="actionDiv" style="display: none;padding: 24px 89px 10px 15px;">
        <form class="layui-form" onsubmit="return false;">
            <div class="layui-form-item">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" placeholder="请输入标题" required type="text" v-model="advertisement.title">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" placeholder="请输入排序" required type="text"
                           v-model="advertisement.sort">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 86px;">跳转地址</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" placeholder="请输入跳转地址" required type="text"
                           v-model="advertisement.targetUrl">
                </div>
            </div>
            <div class="layui-form-item" id="isShowDiv">
                <label class="layui-form-label" style="width: 86px;">是否展示</label>
                <div class="layui-input-block">
                    <input id="isShow" type="hidden" value="true">
                    <input checked lay-skin="switch" name="switch" type="checkbox">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 86px;">到期时间</label>
                <div class="layui-input-block">
                    <input checked lay-filter="endTime" name="endTime" title="永不" type="radio" value="0">
                    <input lay-filter="endTime" name="endTime" title="选择时间" type="radio" value="1">
                </div>
            </div>
            <div class="layui-form-item" id="endTimeDiv" style="display: none">
                <label class="layui-form-label">时间</label>
                <div class="layui-input-block">
                    <input class="layui-input" id="endTime" type="text">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 86px;">选择图片</label>
                <div class="layui-input-block">
                    <button class="layui-btn" id="upload" type="button">
                        <i class="layui-icon">&#xe67c;</i>上传图片
                    </button>
                    <div class="layui-upload-list" style="display: none">
                        <img class="layui-upload-img" id="preview" style="width: 300px">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left: 145px;">
                    <button @click="submit" class="layui-btn">立即提交</button>
                    <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script th:replace="common/admin/common::common_footer_script"></script>
<script th:src="@{/script/vue.min.js}" type="text/javascript"></script>
<script th:src="@{/script/axios.min.js}" type="text/javascript"></script>
<script th:src="@{/layui/layui.js}" type="text/javascript"></script>
<!--<script th:src="@{/layui/lay/modules/layer.js}" type="text/javascript"></script>-->
<script type="text/javascript">
    document.title = '亿人宝 - 轮播图列表';
    const baseUrl = '[[@{/admin/}]]';
    layui.use(['form', 'laydate', 'upload'], function () {
        var form = layui.form;
        var laydate = layui.laydate;
        var upload = layui.upload;

        //执行一个laydate实例
        laydate.render({
            elem: '#endTime', //指定元素
            type: 'datetime'
        });
        //执行实例
        var uploadInst = upload.render({
            elem: '#upload', //绑定元素
            url: '/upload/', //上传接口
            auto: false,
            choose: function (obj) {
                $('.layui-upload-list').show();
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    console.log(result);
                    $('#preview').attr('src', result); //图片链接（base64）
                });
            },
            done: function (res) {
                //上传完毕回调
            },
            error: function () {
                //请求异常回调
            }
        });
        form.on('radio(endTime)', function (data) {
            if (data.value == 0) {
                $('#endTimeDiv').slideUp();
                $('#endTime').val('');
            } else {
                $('#endTimeDiv').slideDown();
            }
        });

        form.on('switch', function (data) {
            $('#isShow').val(data.elem.checked);
        });
    });
    new Vue({
        el: '#app',
        data: {
            title: '',
            action: '',
            advertisement: {
                id: 0,
                title: '',
                imgUrl: '',
                sort: 0,
                targetUrl: '',
                isShow: true,
                endTime: ''
            },
            advertisementList: []
        },
        filters: {
            formatDate: function (value) {
                let date = new Date(value);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? ('0' + MM) : MM;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let m = date.getMinutes();
                m = m < 10 ? ('0' + m) : m;
                let s = date.getSeconds();
                s = s < 10 ? ('0' + s) : s;
                return y + '-' + MM + '-' + d + ' ' + h + ':' + m;
            },
            urlFilter: function (val) {
                return '[[@{/}]]' + val;
            }
        },
        methods: {
            //加载广告列表
            loadAdvertisementList: function () {
                axios.get(baseUrl + 'advertisement/findAdvertisement')
                    .then(response => {
                        console.log(response);
                        this.advertisementList = response.data.obj;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            updateShow: function (id, isShow) {
                let i = true;
                if (isShow) {
                    i = false;
                }
                axios.put(baseUrl + 'advertisement/updateAdvertisementStatus', {
                    id: id,
                    isShow: i
                }).then(response => {
                    console.log(response);
                }).catch(function (error) {
                    console.log(error);
                });
            },
            //弹出操作框
            showBox: function (method, id) {
                if (method === 'add') {
                    this.title = '添加轮播图';
                    this.advertisement = {};
                    $('#isShowDiv').show();
                } else if (method === 'update') {
                    this.title = '修改轮播图';
                    $('#isShowDiv').hide();
                    axios.get(baseUrl + 'advertisement/findAdvertisementById/' + id)
                        .then(response => {
                            console.log(response);
                            this.advertisement = response.data.obj;
                            $('.layui-upload-list').show();
                            $('#preview').attr('src', '[[@{/}]]' + this.advertisement.imgUrl); //图片链接

                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
                layer.open({
                    title: this.title,
                    type: 1,
                    content: $('#actionDiv'),
                    area: ['500px', '550px'],
                    cancel: function (index, layero) {
                        layer.close(index);
                        $('.layui-upload-list').hide();
                    }
                });
                this.action = method;
            },
            //提交表单
            submit: function () {
                let action = this.action;
                let img = $('.layui-upload-file')[0].files[0];
                if (this.advertisement.title == '' || this.advertisement.title == undefined) {
                    layer.msg('请输入标题', {
                        icon: 0
                    });
                    return;
                }
                if (this.advertisement.sort != 0 && this.advertisement.sort == '' || this.advertisement.sort == undefined) {
                    layer.msg('请输入排序', {
                        icon: 0
                    });
                    return;
                }
                if (this.advertisement.targetUrl == '' || this.advertisement.targetUrl == undefined) {
                    layer.msg('请输入跳转地址', {
                        icon: 0
                    });
                    return;
                }

                let check = /^[hH][tT][tT][pP]([sS]?):\/\/(\S+\.)+\S{2,}$/;
                if (!check.test(this.advertisement.targetUrl)) {
                    layer.msg('请输入正确的地址', {
                        icon: 0
                    });
                    return;
                }

                if ($('#endTimeDiv').css('display') == 'block') {
                    if ($('#endTime').val() == '') {
                        layer.msg('请输入到期时间', {
                            icon: 0
                        });
                        return;
                    }
                }

                if (action === 'add') {
                    if (img === undefined) {
                        layer.msg('请选择图片', {
                            icon: 0
                        });
                        return;
                    }
                    let load = layer.load(2);
                    let formData = new FormData;
                    formData.append('title', this.advertisement.title);
                    // formData.append('imgUrl',this.advertisement.imgUrl);
                    formData.append('sort', this.advertisement.sort);
                    formData.append('targetUrl', this.advertisement.targetUrl);
                    formData.append('isShow', $('#isShow').val());
                    formData.append('time', $('#endTime').val());
                    formData.append('img', img);
                    axios.post(baseUrl + 'advertisement/addAdvertisement', formData, {
                        'Content-Type': 'multipart/form-data'
                    })
                        .then(response => {
                            let _this = this;
                            console.log(response);
                            layer.closeAll();
                            layer.msg('添加成功', {
                                icon: 1,
                                time: 2000
                            }, function () {
                                //location.reload()
                                _this.loadAdvertisementList();
                            });
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                } else if (action === 'update') {
                    let load = layer.load(2);
                    let formData = new FormData;
                    formData.append('id', this.advertisement.id);
                    formData.append('title', this.advertisement.title);
                    formData.append('imgUrl', this.advertisement.imgUrl);
                    formData.append('sort', this.advertisement.sort);
                    formData.append('targetUrl', this.advertisement.targetUrl);
                    formData.append('isShow', $('#isShow').val());
                    formData.append('time', $('#endTime').val());
                    formData.append('img', img);
                    axios.put(baseUrl + 'advertisement/updateAdvertisement', formData, {
                        'Content-Type': 'multipart/form-data'
                    })
                        .then(response => {
                            let _this = this;
                            console.log(response);
                            layer.closeAll();
                            layer.msg('修改成功', {
                                icon: 1,
                                time: 2000
                            }, function () {
                                //location.reload()
                                _this.loadAdvertisementList();
                            });
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            },
            deleteAdver: function (id) {
                layer.confirm('确认删除吗？', {icon: 3, title: '提示'}, function (index) {
                    let load = layer.load(2);
                    axios.delete(baseUrl + 'advertisement/deleteAdvertisement/' + id)
                        .then(response => {
                            let _this = this;
                            layer.closeAll();
                            layer.msg('删除成功', {
                                icon: 1,
                                time: 2000
                            }, function () {
                                //location.reload()
                                _this.loadAdvertisementList();
                            });
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                })
            },
        },
        mounted() { //初始化方法
            this.loadAdvertisementList();
        }
    });
</script>
</body>
</html>
